<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>index03.html</title>
</head>
<body>
  <button id="openBtn">打开文件</button>
  <img id="images"  style="width:100%" />
  <button id="saveBtn">保存文件</button>
  <button id="messageBtn">弹出对话框</button>
</body>
<script>
  const { dialog } = require('electron').remote
  var openBtn = document.getElementById('openBtn');
  openBtn.onclick = function(){
    dialog.showOpenDialog({
      title:'请选择你喜欢的小姐姐照片',
      defaultPath:'xiaojiejie.jpg',
      filters:[{name:'jpg',extensions:['jpg']}],
      buttonLabel:'打开图片',
    }).then(result=>{
      let image = document.getElementById('images')
      image.setAttribute("src",result.filePaths[0]);
      console.log(result)
    }).catch(err=>{
      console.log(err)
    })
  }
  // ------------------------------
  const fs = require('fs')
  var saveBtn = document.getElementById('saveBtn')
  saveBtn.onclick = function(){
    dialog.showSaveDialog({
      title:'保存文件',
    }).then(result=>{
      console.log(result.filePath)
      fs.writeFileSync(result.filePath,'技术胖一个前端爱好者')
    }).catch(err=>{
      console.log(err)
    })
  }
  // ------------------------
  var messageBtn = document.getElementById('messageBtn')
  messageBtn.onclick = function(){
    dialog.showMessageBox({
      type:'question',
      title:'去不去由你',
      message:'是不是要跟胖哥去红袖招?',
      buttons:['我要去','不去了','看心情']
    }).then(result=>{
        console.log(result)
    })
  }
</script>
</html>